<!-- 综合监控 -->
<template>
  <div class="monitorall">
    <div class="monitorall_left">
      <div class="monitorall_left_top">
        <ul class="monitorall_left_top_ul">
          <li>
            <Title>近7天的产品录入数量统计</Title>
            <div id="productEntry" class="content"></div>
          </li>
          <li class="monitorall_left_top_ul_li_center">
            <Title>近7天的产品老化数量统计</Title>
            <div id="productAging" class="content"></div>
          </li>
          <!--  <li class="bg">
            <Title>一次下线直通率</Title>
            <div class="content">
              <div class="content_bg"></div>
              <div id="shutDown"></div>
            </div>
          </li> -->
        </ul>
        <ul>
          <li class="monitorall_left_top_ul_li_left">
            <Title> 近7天的产品检测数量统计 </Title>
            <div id="productTesting" class="content"></div>
          </li>
          <li>
            <Title>近7天的打包出库数量统计</Title>
            <div id="packagingOut" class="content"></div>
          </li>
        </ul>
      </div>
      <div class="monitorall_left_bottom">
        <p>已打包{{ productPackagingNum }}件</p>
        <Title>产品打包实时记录</Title>
        <dv-scroll-board ref="productPackagingRef" :config="productPackaging" />
      </div>
    </div>
    <div class="monitorall_right">
      <div class="monitorall_right_top" @click="showDetails">
        <p>数量:{{ productTestingNum }}</p>
        <Title>产品录入实时记录</Title>
        <dv-scroll-board ref="productInputRef" :config="productInput" />
      </div>
      <div class="monitorall_right_center" @click="showDetails">
        <p>
          <span>总数</span>/ <span class="color1">老化中</span>/
          <span class="color2">已完成</span>:
          <span>{{ productAgingObj.TotalCnt }}</span
          >/ <span class="color1">{{ productAgingObj.AgingCnt }}</span
          >/
          <span class="color2">{{ productAgingObj.AgedCnt }}</span>
        </p>
        <Title>产品老化实时记录</Title>
        <dv-scroll-board ref="productAgingRef" :config="productAging" />
      </div>
      <div class="monitorall_right_bottom" @click="showDetails">
        <p>
          <span>总数</span>/ <span class="color3">不合格</span>/
          <span class="color2">合格</span>:
          <span>{{ productTestingObj.TotalCnt }}</span
          >/ <span class="color3">{{ productTestingObj.NoPassCnt }}</span
          >/
          <span class="color2">{{ productTestingObj.PassCnt }}</span>
        </p>
        <p class="first_pass">
          一次直通率: {{ firstPass ? firstPass : "--" }}%
        </p>
        <Title>产品检测实时记录</Title>
        <dv-scroll-board ref="productTestingRef" :config="productTesting" />
      </div>
    </div>
    <a-modal
      v-model:open="open"
      title="查看详情"
      :footer="null"
      :bodyStyle="{ background: '#122942', color: '#00E5FF' }"
      getContainer="body"
    >
      <p v-for="(item, index) in detailsData" :key="item.id" class="details">
        <span v-if="detailsData[index]">{{ index }}</span>
        <span v-if="detailsData[index]">{{ item }}</span>
      </p>
    </a-modal>
  </div>
</template>

<script setup name="monitorall">
import dayjs from "dayjs";
import * as echarts from "echarts";
import { onMounted, markRaw, onBeforeUnmount, reactive } from "vue";
import Title from "@/components/Title/index.vue";
// 近七天产品录入
import monitorallApi from "@/api/monitorallApi.js";
import { transitionTime } from "@/utils/time.js";
// 详情弹窗
let open = ref(false);
// 点击查看详情
let dataname = ref();
let detailsData = ref({});
const showDetails = (e) => {
  if (e.target.className !== "detail") {
    return;
  }

  let index = e.target.getAttribute("index");
  dataname.value = e.target.getAttribute("dataname");
  let _detailsData;
  if (dataname.value === "productAgingData") {
    _detailsData = productAgingData.value[index];
  }
  if (dataname.value === "productInputData") {
    _detailsData = productInputData.value[index];
  }
  if (dataname.value === "productTestingData") {
    _detailsData = productTestingData.value[index];
  }
  for (let key in _detailsData) {
    if (key === "FacNo") {
      _detailsData["产品编码"] = _detailsData["FacNo"];
      delete _detailsData["FacNo"];
    }
    if (key === "UpdateTime") {
      _detailsData["更新时间"] = transitionTime(_detailsData["UpdateTime"]);
      delete _detailsData["UpdateTime"];
    }
    if (key === "PMName") {
      _detailsData["型号"] = _detailsData["PMName"];
      delete _detailsData["PMName"];
    }
    if (key === "PBName") {
      _detailsData["批次"] = _detailsData["PBName"];
      delete _detailsData["PBName"];
    }
    if (key === "HasAgeTime") {
      _detailsData["产品已老化时长(分钟)"] = _detailsData["HasAgeTime"];
      delete _detailsData["HasAgeTime"];
    }

    if (key === "NeedAgeTime") {
      _detailsData["产品需要老化的时长(分钟)"] = _detailsData["NeedAgeTime"];
      delete _detailsData["NeedAgeTime"];
    }

    if (key === "AgeStatusDesp") {
      _detailsData["结果"] = _detailsData["AgeStatusDesp"];
      delete _detailsData["AgeStatusDesp"];
    }
    if (key === "AgeStatus") {
      delete _detailsData["AgeStatus"];
    }
    if (key === "CheckResult") {
      delete _detailsData["CheckResult"];
    }
    if (key === "ID") {
      delete _detailsData["ID"];
    }
    if (key === "UserName") {
      _detailsData["操作员"] = _detailsData["UserName"];
      delete _detailsData["UserName"];
    }
    if (key === "CheckResultDesp") {
      _detailsData["结果"] = _detailsData["CheckResultDesp"];
      delete _detailsData["CheckResultDesp"];
    }
    if (key === "CheckUserName") {
      _detailsData["检测人"] = _detailsData["CheckUserName"];
      delete _detailsData["CheckUserName"];
    }
  }
  detailsData.value = _detailsData;
  open.value = true;
};
let productEntryChart = ref();
// 设置产品录入图表
const setProductEntryChart = (data) => {
  if (!productEntryChart.value) {
    productEntryChart.value = markRaw(
      echarts.init(document.getElementById("productEntry"))
    );
  }
  let seriesData = data.map((el) => el.Cnt);
  let day = data.map((el) => el.Day.split(" ")[0]);
  let xAxisData = day.map((el) => el.split("-")[1]+'/'+el.split("-")[2]);
  let option = {
    color: "#00E5FF",
    xAxis: {
      type: "category",
      data: xAxisData,
      axisTick:{
        alignWithLabel:true
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        data: seriesData,
        type: "bar",
      },
    ],
    grid: {
      top: 20,
      bottom: 0,
      left: 0,
      right: 10,
      containLabel: true,
    },
    tooltip: {
      axisPointer: false,
      confine: false,
      textStyle: {
        color: "#fff",
       
      },
      axisPointer: {
        type: "cross",
        label: {
          show:false,
        },
      },
      extraCssText: "background:#112A41",
      
    },
    axisPointer: {
      show: true,
      type: "line",
    },
  };
  productEntryChart.value.setOption(option, true);
};
// 设置产品老化数量统计
let productAgingChart = ref();
const setProductAgingChart = (data) => {
  if (!productAgingChart.value) {
    productAgingChart.value = markRaw(
      echarts.init(document.getElementById("productAging"))
    );
  }
  let seriesData = data.map((el) => el.Cnt);
  let day = data.map((el) => el.Day.split(" ")[0]);
  let xAxisData = day.map((el) => el.split("-")[1]+'/'+el.split("-")[2]);
  let option = {
    color: "#00E5FF",
    xAxis: {
      type: "category",
      data: xAxisData,
      axisTick:{
        alignWithLabel:true
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        data: seriesData,
        type: "bar",
      },
    ],
    grid: {
      top: 20,
      bottom: 0,
      left: 0,
      right: 10,
      containLabel: true,
    },
    tooltip: {
      axisPointer: false,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:#112A41",
      axisPointer: {
        type: "cross",
        label: {
          show:false,
        },
      },
    },
    axisPointer: {
      snap: true,
      show: true,
      type: "line",
    },
  };
  productAgingChart.value.setOption(option, true);
};
// 设置产品检测数量统计
let productTestingChart = ref();
const setProductTestingChart = (data) => {
  if (!productTestingChart.value) {
    productTestingChart.value = markRaw(
      echarts.init(document.getElementById("productTesting"))
    );
  }
  let seriesData = data.map((el) => el.Cnt);
  let day = data.map((el) => el.Day.split(" ")[0]);
  let xAxisData = day.map((el) => el.split("-")[1]+'/'+el.split("-")[2]);
  let option = {
    color: "#00E5FF",
    xAxis: {
      type: "category",
      data: xAxisData,
      axisTick:{
        alignWithLabel:true
      },
      axisTick:{
        alignWithLabel:true
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        data: seriesData,
        type: "bar",
      },
    ],
    grid: {
      top: 20,
      bottom: 0,
      left: 0,
      right: 10,
      containLabel: true,
    },
    tooltip: {
      axisPointer: true,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:#112A41",
      axisPointer: {
        type: "cross",
        label: {
          show:false,
          backgroundColor: "#6a7985",
        },
      },
    },
    axisPointer: {
      snap: true,
      show: true,
      type: "line",
    },
  };
  productTestingChart.value.setOption(option, true);
};
// 设置打包出库数量统计
let packagingOutChart = ref();
const setPackagingOutChart = (data) => {
  if (!packagingOutChart.value) {
    packagingOutChart.value = markRaw(
      echarts.init(document.getElementById("packagingOut"))
    );
  }
  let seriesData = data.map((el) => el.Cnt);
  let day = data.map((el) => el.Day.split(" ")[0]);
  let xAxisData = day.map((el) => el.split("-")[1]+'/'+el.split("-")[2]);
  let option = {
    color: "#00E5FF",
    xAxis: {
      type: "category",
      data: xAxisData,
      axisTick:{
        alignWithLabel:true
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        data: seriesData,
        type: "bar",
      },
    ],
    grid: {
      top: 20,
      bottom: 0,
      left: 0,
      right: 5,
      containLabel: true,
    },
    tooltip: {
      axisPointer: true,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:#112A41",
      axisPointer: {
        type: "cross",
        label: {
          show:false,
          backgroundColor: "#6a7985",
        },
      },
    },

    axisPointer: {
      snap: true,
      show: true,
      type: "line",
    },
  };
  packagingOutChart.value.setOption(option, true);
};
// 一次下线直通率
/* let shutDownChart = ref();
const sethutDownChart = (data) => {
  if (!shutDownChart.value) {
    shutDownChart.value = markRaw(
      echarts.init(document.getElementById("shutDown"))
    );
  }

  let seriesData = [
    
    {
      value: data.PassCnt,
      name: "合格率",
      label: {
        color: "#0069fc",
      },
    },
    {
      value: data.NoPassCnt,
      name: "不合格率",
      label: {
        color: "#CF2226",
      },
    },
  ];
  let option = {
    grid: {
      shadowColor: "rgba(255,255,255,1)",
      shadowBlur: 10,
    },
    tooltip: {
      axisPointer: true,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:#112B43",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#112B43",
        },
      },
    },
    series: [
      {
        color: ["#00FFED", "#D8BB37"],
        tooltip: {
          trigger: "item",
          show: true,
        },
        type: "pie",
        selectedMode: "single",
        radius: [0, "65%"],
        label: {
          //formatter: "{name|{b}}\n{value|{c}%}",
          formatter: "{name|{b}}\n {value|{d}%}",
          position: "inside",
          fontSize: 14,
          fontWeight: 800,
          rich: {
            name: {
              fontWeight: "bold",
              overflow: "none",
            },
            value: {
              fontWeight: "bold",
              overflow: "none",
              fontStyle: "italic",
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: seriesData,
      },
      {
        color: "#00FFED",

        tooltip: {
          show: false,
        },
        type: "pie",
        radius: ["75%", "79%"],
        label: {
          show: false,
        },
        select: {
          disabled: true,
        },
        emphasis: {
          disabled: true,
        },
        labelLine: {
          show: false,
        },
        cursor: "auto",
        data: [{ value: 100 }],
      },
    ],
  };
  shutDownChart.value.setOption(option, true);
}; */
const props = defineProps(["fullscreen"]);
/* --------------以下是echarts图标数据的请求 */
/* 请求近七天的产品录入 */
const fetchLastProductAddCntStatistic = () => {
  monitorallApi
    .getTheLastProductAddCntStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      EndDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      PreDayCnt: 7,
    })
    .then((res) => {
      let data = res.Data.map((el) => {
        return {
          Day: transitionTime(el.Day),
          Cnt: el.Cnt,
        };
      });
      setProductEntryChart(data);
    });
};
//  获取近七天的产品老化数量统计
const fetchTheLastProductAgeCntStatistic = () => {
  monitorallApi
    .getTheLastProductAgeCntStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      EndDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      PreDayCnt: "7",
    })
    .then((res) => {
      let data = res.Data.map((el) => {
        return {
          Day: transitionTime(el.Day),
          Cnt: el.Cnt,
        };
      });
      setProductAgingChart(data);
    });
};
//获取最近七天的产品检测数量统计信息
const fetchTheLastProductCheckCntStatistic = () => {
  monitorallApi
    .getTheLastProductCheckCntStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      EndDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      PreDayCnt: "7",
    })
    .then((res) => {
      let data = res.Data.map((el) => {
        return {
          Day: transitionTime(el.Day),
          Cnt: el.Cnt,
        };
      });
      setProductTestingChart(data);
    });
};
// 获取近七天的打包出库数量统计
const fetchTheLastProductPackageCntStatistic = () => {
  monitorallApi
    .getTheLastProductPackageCntStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      EndDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      PreDayCnt: "7",
    })
    .then((res) => {
      let data = res.Data.map((el) => {
        return {
          Day: transitionTime(el.Day),
          Cnt: el.Cnt,
        };
      });
      setPackagingOutChart(data);
    });
};
//
// 获取指定日期的一次检测通过率
let firstPass = ref();
const fetchOnePassStatistic = () => {
  monitorallApi
    .getOnePassStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      //sethutDownChart(res.Data);
      let { PassCnt, TotalCnt } = res.Data;
      firstPass.value = ((PassCnt * 100) / TotalCnt).toFixed(2);
    });
};

/* --------------以下是轮播数据的请求 */
//获取产品录入实时记录
// 产品录入总数
let productTestingNum = ref();
// 产品实时录入配置
let productInputData = ref([]);
const productInputRef = ref();
let productInput = reactive({
  headerBGC: "#122D44",
  oddRowBGC: "#122840",
  header: ["时间", "编号", "型号", "批次", "操作员", "详情"],
  hoverPause: false,
  columnWidth: [150, 170],
  data: [],
  align: ["center", "center", "center", "center", "center", "center"],
});
// 请求产品录入实时数据
const fetchCurDayProductAddRecord = () => {
  monitorallApi
    .getCurDayProductAddRecord({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      let { Record } = res.Data;
      let data = Record.map((el, index) => {
        return [
          transitionTime(el.UpdateTime),
          el.FacNo,
          el.PMName,
          el.PBName,
          el.UserName,
          `<span index='${index}' class='detail' dataName='productInputData' style='cursor: pointer;color: #00E5FF;'>详情</span>`,
        ];
      });
      productInputData.value = Record;
      productInputRef.value.updateRows(data, 0);
      productTestingNum.value = res.Data.TotalCnt;
    });
};

//产品老化实时记录配置
let productAgingObj = ref({});
let productAgingData = ref([]);
const productAgingRef = ref();
const productAging = reactive({
  headerBGC: "#122D44",
  oddRowBGC: "#122840",
  header: ["时间", "编号", "型号", "批次", "状态", /* "位置", */ "详情"],
  hoverPause: false,
  align: ["center", "center", "center", "center", "center", "center", "center"],
  data: [],
  columnWidth: [150, 170],
});
// 请求产品老化实时数据
const fetchCurDayProductAgeRecord = () => {
  monitorallApi
    .getCurDayProductAgeRecord({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      let { Record } = res.Data;
      let data = Record.map((el, index) => {
        return [
          transitionTime(el.UpdateTime),
          el.FacNo,
          el.PMName,
          el.PBName,
          el.AgeStatusDesp,
          `<span index='${index}' class='detail' dataName='productAgingData' style='cursor: pointer;color: #00E5FF;'>详情</span>`,
        ];
      });
      productAgingRef.value.updateRows(data, 0);
      productAgingData.value = Record;
      productAgingObj.value.TotalCnt = res.Data.TotalCnt;
      productAgingObj.value.AgingCnt = res.Data.AgingCnt;
      productAgingObj.value.AgedCnt = res.Data.AgedCnt;
    });
};

// 产品检测实时记录配置
let productTestingObj = ref({});
let productTestingData = ref([]);
const productTestingRef = ref();
const productTesting = reactive({
  headerBGC: "#122D44",
  oddRowBGC: "#122840",
  header: [
    "时间",
    "编号",
    "型号",
    "批次",
    "结果",
    "操作员",
    /*  "检测设备", */
    "详情",
  ],
  data: [],
  align: [
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
    "center",
  ],
  hoverPause: false,
  columnWidth: [150, 170, 100],
});
//获取指定日期的产品检测实时记录
const fetchCurDayProductCheckRecord = () => {
  monitorallApi
    .getCurDayProductCheckRecord({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      let { Record } = res.Data;
      let data = Record.map((el, index) => {
        return [
          transitionTime(el.UpdateTime),
          el.FacNo,
          el.PMName,
          el.PBName,
          el.CheckResultDesp,
          el.CheckUserName,

          `<span index='${index}' class='detail' dataName='productTestingData' style='cursor: pointer;color: #00E5FF;'>详情</span>`,
        ];
      });
      productTestingData.value = Record;
      productTestingRef.value.updateRows(data, 0);
      productTestingObj.value.TotalCnt = res.Data.TotalCnt;
      productTestingObj.value.PassCnt = res.Data.PassCnt;
      productTestingObj.value.NoPassCnt = res.Data.NoPassCnt;
    });
};
// 打包总数量
let productPackagingNum = ref();
const productPackagingRef = ref();
// 产品打包实时记录配置
const productPackaging = reactive({
  headerBGC: "#122D44",
  oddRowBGC: "#122840",
  header: ["时间", "编号", "型号", "批次", /* "托盘",  */ "操作员"],
  data: [],
  hoverPause: false,
  align: ["center", "center", "center", "center", "center", "center"],
  columnWidth: [180, 200],
});
//获取指定日期的产品打包实时记录
const fetchCurDayProductPackageRecord = () => {
  monitorallApi
    .getCurDayProductPackageRecord({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      let { Record } = res.Data;
      let data = Record.map((el, index) => {
        return [
          transitionTime(el.UpdateTime),
          el.FacNo,
          el.PMName,
          el.PBName,
          el.PackageUserName,
        ];
      });
      productPackagingRef.value.updateRows(data, 0);
      productPackagingNum.value = res.Data.TotalCnt;
    });
};
/* ------------以下是数据开始请求 */
let id;
id = setInterval(() => {
  // 定时请求七天产品录入数量
  fetchLastProductAddCntStatistic();
  //  定时请求七天的产品老化数量统计
  fetchTheLastProductAgeCntStatistic();
  //定时请求获取七天产品检测数量统计
  fetchTheLastProductCheckCntStatistic();
  // 定时请求获取七天的打包出库数量统计
  fetchTheLastProductPackageCntStatistic();
  // 定时请求一次检测通过率
  fetchOnePassStatistic();
  // 定时请求获取产品录入实时记录
  fetchCurDayProductAddRecord();
  // 定时请求获取产品老化实时记录
  fetchCurDayProductAgeRecord();
  // 定时请求获取产品检测实时记录
  fetchCurDayProductCheckRecord();
  // 定时请求获取产品打包实时记录
  fetchCurDayProductPackageRecord();
}, 5000);

onMounted(() => {
  props.fullscreen();
  window.addEventListener("resize", function () {
    productEntryChart.value.resize();
    productAgingChart.value.resize();
    productTestingChart.value.resize();
    // shutDownChart.value.resize();
    packagingOutChart.value.resize();
  });
  // 初始化请求七天产品录入数量
  fetchLastProductAddCntStatistic();
  //  初始化请求七天的产品老化数量统计
  fetchTheLastProductAgeCntStatistic();
  // 初始化获取七天产品检测数量统计
  fetchTheLastProductCheckCntStatistic();
  // 初始化获取七天的打包出库数量统计
  fetchTheLastProductPackageCntStatistic();
  //初始化一次检测通过率
  fetchOnePassStatistic();
  // 初始化获取产品录入实时记录
  fetchCurDayProductAddRecord();
  // 初始化获取产品老化实时记录
  fetchCurDayProductAgeRecord();
  // 初始化获取产品检测实时记录
  fetchCurDayProductCheckRecord();
  // 初始化获取产品打包实时记录
  fetchCurDayProductPackageRecord();
});
onBeforeUnmount(() => {
  if (id) clearInterval(id);
});
</script>

<style lang="scss" scoped>
.monitorall {
  height: 100%; /* 
  overflow: hidden; */
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 6px;

  & > * {
    height: 100%;

    // border:1px solid green;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
    /*  overflow: hidden; */
  }

  .monitorall_left {
    width: 51%;
    & > div {
      width: 100%;
    }
    .monitorall_left_top {
      height: 66.6%;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .monitorall_left_top_ul {
        height: 33.3%;
        margin-bottom: 6px;
        .bg {
          background: url("@/static/supervisoryControl/pic_bj03.png"),
            linear-gradient(to bottom, #04101b, #01101b);
          background-size: cover;
          background-position: center;
        }
        .monitorall_left_top_ul_li_center {
          margin-left: 6px;
        }
        & + ul {
          height: 33.3%;
          .monitorall_left_top_ul_li_left {
            margin-right: 6px;
          }
        }
      }
      & > ul {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        & > li {
          padding: 0 10px 10px;
          flex: 1;
          height: 100%;
          // background-image: url("@/static/supervisoryControl/pic_bj05.png");
          // background-size: 100% 100%;
          border-image: url("@/static/supervisoryControl/pic_bj05.png") 10/8px/0;
          background: linear-gradient(to bottom, #112e46, #131d34);
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          & > div {
            width: 100%;
          }
          .content {
            flex: 1;
            position: relative;
            container-type: size !important;
            @keyframes identifier {
              0% {
                box-shadow: 0 0 0px #00ffed;
              }
              50% {
                box-shadow: 0 0 calc((25cqh) + (25cqw)) #00ffed;
              }
              100% {
                box-shadow: 0 0 0px #00ffed;
              }
            }
            .content_bg {
              position: absolute;
              width: calc((20cqh) + (20cqw));
              height: calc((20cqh) + (20cqw));
              left: 50%;
              top: 50%;
              transform: translateX(-50%) translateY(-50%);
              z-index: 0;
              //background-color: red;
              border-radius: 100%;

              box-shadow: 0 0 100px #00ffed;
              animation: identifier 5s linear infinite;
            }
            #shutDown {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .monitorall_left_bottom {
      overflow: hidden;
      padding: 0 10px 10px;
      height: 33%;
      margin-top: 6px;
      position: relative;
      // background-image: url("@/static/supervisoryControl/pic_bj04.png");
      // background-size: 100% 100%;
      border-image: url("@/static/supervisoryControl/pic_bj04.png") 10/8px/0;
      background: linear-gradient(to bottom, #112e46, #131d34);
      & > p {
        position: absolute;
        top: 3.6%;
        right: 2%;
        color: #00e5ff;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 12px;
        z-index: 100;
      }
    }
  }
  .monitorall_right {
    width: 50%;
    margin-right: 6px;
    & > div {
      height: 33.3%;
      width: 100%;
      overflow: hidden;
      position: relative;
      // background-image: url("@/static/supervisoryControl/pic_bj04.png");
      // background-size: 100% 100%;
      border-image: url("@/static/supervisoryControl/pic_bj04.png") 10/8px/0;
      background: linear-gradient(to bottom, #112e46, #131d34);
      & > p {
        position: absolute;
        top: 3.6%;
        right: 2%;
        color: #00e5ff;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 12px;
        z-index: 100;
        & > .color1 {
          color: #ff8300;
        }
        & > .color2 {
          color: #09b17f;
        }
        & > .color3 {
          color: #cf2226;
        }
      }
    }
    .monitorall_right_top {
      overflow: hidden;
      padding: 0 10px 10px;
    }
    .monitorall_right_center {
      overflow: hidden;
      margin: 6px 0;
      padding: 0 10px 10px;
    }
    .monitorall_right_bottom {
      overflow: hidden;
      box-sizing: border-box;
      padding: 0 10px 10px;
      .first_pass {
        left: 2%;
      }
    }
  }
}
</style>